<template>
	<div class="user-index">
		<a-modal
			v-model:visible="props.visible"
			class="user-modal"
			width="80%"
			@ok="handleOk"
			height="75%"
			:footer="null"
			@cancel="cancel"
		>
			<h3>加密锁续订</h3>
			<div class="content">
				<!-- <span class="select-info">当前设备存在多个加密锁，请选择需要续订的加密锁</span> -->
				<a-descriptions bordered :column="1">
					<a-descriptions-item label="锁号">
						<a-input
							v-model:value="value"
							placeholder="请输入/选择锁号"
						/>
					</a-descriptions-item>
					<a-descriptions-item label="产品名称"
						>T3131144001</a-descriptions-item
					>
					<a-descriptions-item label="续订期限"
						>2023-03-21</a-descriptions-item
					>
					<a-descriptions-item label="购买人"
						>李先生</a-descriptions-item
					>
					<a-descriptions-item label="联系电话"
						>李先生</a-descriptions-item
					>
					<a-descriptions-item label="短信验证码">
						<div class="message">
							<a-input
								v-model:value="value"
								placeholder="请输入验证码"
							/>
							<a-button>发送验证码</a-button>
						</div>
					</a-descriptions-item>
					<a-descriptions-item label="续订说明">
						<a-textarea
							v-model:value="value"
							placeholder="产品续订说明"
							:rows="4"
						/>
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="footer">
				<div class="left">
					<span class="desc"
						>续订申请提交后会，24小时内会有区域负责人联系具体续订事宜</span
					>
					<span class="info">客服热线：400-005-8008</span>
				</div>
				<div class="btn-list">
					<a-button @click="cancel">取消</a-button>
					<a-button type="primary">提交</a-button>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup>
import { ref, defineProps, reactive } from "vue";

const props = defineProps(["visible"]);
const emits = defineEmits(["update:visible"]);
let fromData = reactive({
	serial: 0,
	status: "0",
	applyType: 0,
	callUserName: "",
	tel: "",
	description: "",
});
const handleOk = () => {};

const cancel = () => {
	emits("update:visible", false);
};
</script>

<style lang="scss" scoped>
h3 {
	font-size: 21px;
	color: #287cfa;
	text-align: center;
}
.message {
	display: flex;
	justify-content: space-between;
	.ant-input {
		width: 60%;
		text-align: center;
		border: none;
	}
	.ant-btn {
		border: 1px solid #6590fc;
		color: #287cfa;
	}
}
:deep(.ant-descriptions-row) {
	height: 44px;
	line-height: 44px;
}
:deep(.ant-descriptions-row .ant-descriptions-item-label) {
	text-align: right;
	padding: 0 24px;
	width: 30%;
}
:deep(.ant-descriptions-row .ant-descriptions-item-content) {
	text-align: center;
	padding: 0 24px;
}
.content {
	height: 300px;
	overflow-y: auto;
	.select-info {
		display: block;
		font-size: 12px;
		color: #606060;
		margin-bottom: 8px;
	}
}
.status {
	color: #15b426;
}
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 30px;
	.left {
		span {
			font-size: 12px;
			display: block;
		}
		.desc {
			color: #de3f3f;
		}
		.info {
			color: #2a2a2a;
			margin-top: 5px;
		}
	}
	.btn-list {
		button + button {
			margin-left: 10px;
		}
	}
}
</style>
